<template>
	<view class="container">
		<map id="map" 
			class="map"
			:latitude="latitude" 
			:longitude="longitude" 
			:markers="markers"
			:scale="16"
			show-location
			enable-zoom
			enable-scroll>
		</map>
		
		<view class="controls">
			<button class="btn" @tap="getCurrentLocation">获取位置</button>
			<button class="btn" @tap="searchNearby">搜索周边</button>
		</view>
		
		<view class="info-panel" v-if="address">
			<view class="address">当前位置: {{address}}</view>
		</view>
		
		<view class="poi-list" v-if="pois.length > 0">
			<view class="poi-item" v-for="(poi, index) in pois" :key="index" @tap="selectPoi(poi)">
				<view class="poi-name">{{poi.name}}</view>
				<view class="poi-address">{{poi.address}}</view>
				<view class="poi-distance">{{poi.distance}}米</view>
			</view>
		</view>
		
		<view class="no-result" v-if="searched && pois.length === 0">
			<text>未找到周边地点</text>
		</view>
	</view>
</template>

<script>
// 简化实现，不使用SDK
export default {
	data() {
		return {
			latitude: 21.5673,
			longitude: 111.9845,
			address: '',
			markers: [],
			pois: [],
			searched: false
		}
	},
	onLoad() {
		// 页面加载时尝试获取位置
		this.getCurrentLocation();
	},
	methods: {
		// 获取当前位置
		getCurrentLocation() {
			uni.showLoading({
				title: '获取位置中...'
			});
			
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					console.log('位置获取成功:', res);
					this.latitude = res.latitude;
					this.longitude = res.longitude;
					
					// 添加当前位置标记
					this.markers = [{
						id: 0,
						latitude: res.latitude,
						longitude: res.longitude,
						title: '当前位置',
						iconPath: '/static/logo.png',
						width: 32,
						height: 32
					}];
					
					// 获取地址信息 - 使用微信逆地理编码
					this.getAddressInfo(res);
					uni.hideLoading();
				},
				fail: (err) => {
					console.error('位置获取失败:', err);
					uni.hideLoading();
					uni.showToast({
						title: '位置获取失败',
						icon: 'none'
					});
				}
			});
		},
		
		// 获取地址信息
		getAddressInfo(location) {
			// 使用逆地理编码，简化版本只返回固定地址
			setTimeout(() => {
				this.address = '广东省阳江市阳西县沙扒镇沙扒湾';
			}, 500);
		},
		
		// 搜索周边POI
		searchNearby() {
			if (!this.latitude || !this.longitude) {
				uni.showToast({
					title: '请先获取位置',
					icon: 'none'
				});
				return;
			}
			
			uni.showLoading({
				title: '搜索周边...'
			});
			
			this.searched = true;
			
			// 模拟数据
			setTimeout(() => {
				// 模拟的POI数据
				const mockedPOIs = [
					{
						name: '沙扒湾海滩',
						address: '广东省阳江市阳西县沙扒镇',
						latitude: 21.56723,
						longitude: 111.98445,
						distance: '1200'
					},
					{
						name: '沙扒湾度假酒店',
						address: '广东省阳江市阳西县沙扒镇海滨路',
						latitude: 21.5687,
						longitude: 111.9838,
						distance: '800'
					},
					{
						name: '海鲜市场',
						address: '广东省阳江市阳西县沙扒镇渔港路',
						latitude: 21.5695,
						longitude: 111.9825,
						distance: '600'
					}
				];
				
				// 更新POI列表
				this.pois = mockedPOIs;
				
				// 更新标记
				const poiMarkers = mockedPOIs.map((poi, index) => {
					return {
						id: index + 1,
						latitude: poi.latitude,
						longitude: poi.longitude,
						title: poi.name,
						iconPath: '/static/风景.png',
						width: 32,
						height: 32
					};
				});
				
				// 保留当前位置标记
				const currentLocationMarker = this.markers.find(m => m.id === 0);
				this.markers = currentLocationMarker ? [currentLocationMarker, ...poiMarkers] : poiMarkers;
				
				uni.hideLoading();
			}, 1000);
		},
		
		// 选择POI
		selectPoi(poi) {
			console.log('选择地点:', poi);
			
			// 打开导航
			uni.openLocation({
				latitude: parseFloat(poi.latitude),
				longitude: parseFloat(poi.longitude),
				name: poi.name,
				address: poi.address,
				scale: 18
			});
		}
	}
}
</script>

<style>
.container {
	position: relative;
	height: 100vh;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.map {
	width: 100%;
	flex: 1;
}

.controls {
	position: absolute;
	top: 30rpx;
	right: 30rpx;
	z-index: 10;
	display: flex;
	flex-direction: column;
}

.btn {
	margin-bottom: 20rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
	padding: 15rpx 25rpx;
	font-size: 28rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.info-panel {
	position: absolute;
	top: 30rpx;
	left: 30rpx;
	right: 150rpx;
	background-color: rgba(255, 255, 255, 0.9);
	padding: 20rpx;
	border-radius: 10rpx;
	z-index: 5;
}

.address {
	font-size: 26rpx;
	color: #333;
}

.poi-list {
	position: absolute;
	bottom: 30rpx;
	left: 30rpx;
	right: 30rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
	max-height: 40vh;
	overflow-y: auto;
	z-index: 10;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.poi-item {
	padding: 20rpx 30rpx;
	border-bottom: 1rpx solid #eee;
}

.poi-item:last-child {
	border-bottom: none;
}

.poi-name {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 5rpx;
}

.poi-address {
	font-size: 24rpx;
	color: #666;
	margin-bottom: 5rpx;
}

.poi-distance {
	font-size: 24rpx;
	color: #1296db;
}

.no-result {
	position: absolute;
	bottom: 30rpx;
	left: 30rpx;
	right: 30rpx;
	padding: 30rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
	text-align: center;
	font-size: 28rpx;
	color: #999;
	z-index: 10;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}
</style> 